<template>
  <div id="home" style="background-color: white">
    <div
      style="
        float: left;
        background-color: white;
        width: 50px;
        max-height: 450px;
        min-height: 420px;
      "
    ></div>
    <div
      align="left"
      style="
        float: left;
        background-color: white;
        width: 300px;
        max-height: 450px;
        min-height: 420px;
        line-height: 28px;
        margin-top: 10px;
      "
    >
      <el-form
        ref="form"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        status-icon
      >
        <el-form-item label="昵称" prop="nickname" label-width="auto">
          <el-input v-model="ruleForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" label-width="auto">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" label-width="auto">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label-width="auto">
          <el-button type="primary" @click="submitForm">修改</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div
      align="left"
      style="
        float: left;
        background-color: white;
        width: 360px;
        min-height: 420px;
        max-height: 450px;
      "
    >
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8080/forum/upload/uploadavatar"
        :data="{ uId: this.user.uId }"
        list-type="picture-card"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: "",
      user: JSON.parse(sessionStorage.getItem("user")),
      ruleForm: {
        nickname: JSON.parse(sessionStorage.getItem("user")).nickname,
        phone: JSON.parse(sessionStorage.getItem("user")).phone,
        email: JSON.parse(sessionStorage.getItem("user")).email,
      },
    };
  },
  methods: {
    submitForm() {
      let uId = JSON.parse(sessionStorage.getItem("user")).uId;
      let nickname = this.ruleForm.nickname;
      let phone = this.ruleForm.phone;
      let email = this.ruleForm.email;
      var _this = this;
      $.ajax({
        type: "post",
        data: { uId, nickname, phone, email },
        url: "http://localhost:8080/forum/user/updateinfo",
        dataType: "json",
        success: function (response) {
          console.log(response);
          if (response === 200) {
            // 更新sessionStorage中的值
            let oldUser = JSON.parse(sessionStorage.getItem("user"));
            let newUser = {
              uId: oldUser.uId,
              username: oldUser.username,
              password: oldUser.password,
              //   可能是新的
              nickname: _this.ruleForm.nickname,
              name: oldUser.name,
              sex: oldUser.sex,
              avatar: oldUser.avatar,
              //   可能是新的
              phone: _this.ruleForm.phone,
              idNumber: oldUser.idNumber,
              enterYear: oldUser.enterYear,
              className: oldUser.className,
              subject: oldUser.subject,
              //   可能是新的
              email: _this.ruleForm.email,
              messageCount: oldUser.messageCount,
              topicCount: oldUser.topicCount,
              commentCount: oldUser.commentCount,
            };
            sessionStorage.setItem("user", JSON.stringify(newUser));
            _this.$message({
              message: "修改成功",
              type: "success",
              duration: 1000,
            });
          }
        },
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$message({
        message: "头像修改成功",
        type: "success",
        duration: 1000,
      });
      // 更新sessionStorage中的值
      let oldUser = JSON.parse(sessionStorage.getItem("user"));
      let newUser = {
        uId: oldUser.uId,
        username: oldUser.username,
        password: oldUser.password,
        nickname: oldUser.nickname,
        name: oldUser.name,
        sex: oldUser.sex,
        // 头像是新的
        avatar: res,
        phone: oldUser.phone,
        idNumber: oldUser.idNumber,
        enterYear: oldUser.enterYear,
        className: oldUser.className,
        subject: oldUser.subject,
        email: oldUser.email,
        messageCount: oldUser.messageCount,
        topicCount: oldUser.topicCount,
        commentCount: oldUser.commentCount,
      };
      sessionStorage.setItem("user", JSON.stringify(newUser));
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPng = file.type === "image/png";
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isJPG && !isPng) {
        this.$message.error("上传头像图片只能是 JPG 格式或 PNG 格式!");
      }
      if (!isLt10M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isJPG && isLt10M;
    },

    iFrameHeight(n) {
      var ifm = document.getElementById("test" + n);
      var subWeb = document.frames
        ? document.frames["test" + n].document
        : ifm.contentDocument;
      if (ifm != null && subWeb != null) {
        ifm.height = subWeb.body.scrollHeight;
      }
    },
    test_item(n) {
      var menu = document.getElementById("leftBodyNav");
      var menuli = menu.getElementsByTagName("div");
      for (var i = 1; i <= menuli.length; i++) {
        menuli[n - 1].className = "leftBodyNavDown";
        menuli[i - 1].className = "leftBodyNavStyle";
        document.getElementById("home").style.display = "none"; //隐藏
        document.getElementById("content").style.display = "block"; //隐藏
      }
    },
    checkULogin() {
      var msg = "${sessionScope.user.username}";
      if (!msg) {
        var returnVal = window.confirm("未登录或登录已失效！请登录！", "提示");
        if (returnVal) {
          location.href = "login.jsp";
        }
        return false;
      }
      return true;
    },
  },
  mounted() {},
};
</script>

<style scoped>
.avatar-uploader {
  margin-left: 100px;
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
